(function(angular) {
    angular.module('app').component('ngTabs', {
        css: 'app/components/ng.tabs.component/ng.tabs.component.css',
        controller: ngTabsController,
        template: '<ul class="ng-tabs"><li class="tab" ng-repeat="pane in $ctrl.panes track by $index" ng-class="{ \'active\': pane.selected }" ng-click="$ctrl.select( pane )"><a href="javascript:;">{{ ::pane.tabTitle }}</a></li></ul><ng-transclude></ng-transclude>',
        transclude: true
    });

    ngTabsController.$inject = [];

    function ngTabsController() {
        var vm = this;


        vm.panes = [];
        vm.select = select;
        vm.addPane = addPane;

        function select(pane) {

            angular.forEach(vm.panes, function(item) {
                item.selected = false;
            });
            pane.selected = true;
        }

        function addPane(pane) {
            vm.panes.push(pane);
            if (vm.panes.length === 1) {
                select(pane);
            }
        }
    }

    angular.module('app').component('ngTab', {
        require: {
            ngTabs: '^ngTabs'
        },
        controller: ngTabController,

        template: '<div class="ng-tab-panel" ng-show="$ctrl.selected === true"><ng-transclude></ng-transclude></div>',
        transclude: true,
        bindings: {
            tabTitle: "@"
        }
    });

    ngTabController.$inject = ['$scope'];

    function ngTabController($scope) {

        var vm = this;


        vm.$onInit = function() {
            vm.ngTabs.addPane(this);
        };


    }
})(angular);
